<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Patterns</title>
  </head>
  <body>
    <svg
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0" y="0" width="100%" height="100%" style="fill: greenyellow" />
      <defs>
        <pattern
          id="patt1"
          x="0"
          y="0"
          width="20"
          height="20"
          patternUnits="userSpaceOnUse"
        >
          <circle
            cx="10"
            cy="10"
            r="10"
            fill="red"
            stroke="blue"
            stroke-width="3"
          />
        </pattern>
      </defs>
      <rect
        width="200"
        height="100"
        x="0"
        y="0"
        stroke="black"
        fill="url(#patt1)"
      />
    </svg>
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="grad1">
          <stop offset="0%" stop-color="white" />
          <stop offset="100%" stop-color="red" />
        </linearGradient>
        <pattern id="patt2" x="0" y="0" width="0.25" height="0.25">
          <rect x="0" y="0" width="100%" height="100%" fill="lightblue" />
          <circle
            cx="50%"
            cy="50%"
            r="40%"
            fill="url(#grad1)"
            fill-opacity="0.8"
          />
        </pattern>
      </defs>

      <rect
        width="200"
        height="200"
        x="0"
        y="0"
        stroke="black"
        fill="url(#patt2)"
      />
    </svg>
    <svg
      width="200"
      height="200"
      viewBox="0 0 200 200"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient id="grad2">
          <stop offset="0%" stop-color="white" />
          <stop offset="100%" stop-color="red" />
        </linearGradient>
        <pattern id="patt3" x="0" y="0" width="0.25" height="0.25">
          <rect x="0" y="0" width="50" height="50" fill="lightblue" />
          <circle
            cx="25"
            cy="25"
            r="20"
            fill="url(#grad2)"
            fill-opacity="0.8"
          />
        </pattern>
      </defs>

      <rect
        width="200"
        height="200"
        x="0"
        y="0"
        stroke="black"
        fill="url(#patt3)"
      />
    </svg>

    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- 定义线性渐变 -->
        <linearGradient id="grad5" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="white" />
          <stop offset="100%" stop-color="red" />
        </linearGradient>

        <!-- 定义 pattern -->
        <pattern
          id="patt5"
          width="0.25"
          height="0.25"
          patternUnits="objectBoundingBox"
        >
          <!-- 背景矩形 -->
          <rect width="100%" height="100%" fill="lightblue" />
          <!-- 居中显示的圆形，填充渐变 -->
          <circle cx="50%" cy="50%" r="50%" fill="url(#grad5)" />
        </pattern>
      </defs>

      <!-- 使用 pattern 填充 -->
      <rect width="200" height="200" fill="url(#patt5)" stroke="black" />
    </svg>

    <svg
      width="100"
      height="100"
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <rect
        x="0"
        y="0"
        width="100%"
        height="100%"
        fill="none"
        stroke="green"
        stroke-width="1"
      />

      <defs>
        <pattern id="pat1" x="0" y="0" width="0.1" height="0.1">
          <rect x="0" y="0" width="10" height="10" fill="skyblue" />
          <circle id="circle" cx="5" cy="5" r="2" fill="red" />
        </pattern>
      </defs>

      <rect x="0" y="0" width="50%" height="100%" fill="url(#pat1)" />
      <rect
        x="50%"
        y="0"
        width="50%"
        height="100%"
        fill="rgba(0, 0, 125, 0.3)"
      />
      <g>
        <path d="M0 0 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 10 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 20 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 30 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 40 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 50 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 60 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 70 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 80 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 90 h100" fill="none" stroke="green" stroke-width="1" />
        <path d="M0 100 1100" fill="none" stroke="green" stroke-width="1" />

        <path d="M10 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M20 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M30 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M40 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M50 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M60 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M70 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M80 0 v100" fill="none" stroke="green" stroke-width="1" />
        <path d="M90 0 v100" fill="none" stroke="green" stroke-width="1" />

        <circle cx="50" cy="50" r="1.5" fill="red" />
      </g>
    </svg>
  </body>
</html>
